<template>
    <div class="cashback">
      <ul class="order-type clearfix">
        <li class="type-li" :class="{active:active[key]}"  v-for="(item,key) in tab" :key="item.content" @click="change(key)">{{item.content}}</li>
        <span class="unble_confirm_num" v-show="isShowNum">{{unAbleNum}}</span>
      </ul>
      <div class="order-list">
        <OrderList :listData="orderList" :title="orderStatus" :noData ="noData" :Loading="Loading"></OrderList>
      </div>
      <div class="common-page" v-show="hasMore">
        <pageination @changePage="changePages" :pages="totalPages"></pageination>
      </div>
    </div>
</template>

<script>
  import {MyOrder} from 'api/my-order'
  import {MyOrderUnable} from 'api/my-order-unable' //获取unable的总数
  import OrderList from 'components/order-list/order-list'
  import pageination from 'base/pageination/pageination'
  import monitoring from '../../common/js/monitoring';
  const OrderAllStatus = ['Processing','Confirm','Unable','Transfered','All'];
  export default {
    data(){
      return{
        active: [true, false, false, false, false],//统一管理状态;
        tab: [{
          "content": "Processing",　　　　//tab-span
          "func": "com1"           //仅仅用来存放组件;
        }, {
          "content": "Confirmed",
          "func": "com2"
        }, {
          "content": "Unable to confirm",
          "func": "com3"
        }, {
          "content": "Transfered",
          "func": "com4"
        }, {
          "content": "All",
          "func": "com5"
        }],
        Loading: false,
        orderList: [],
        noData: false,
        unAbleNum: 0,
        isShowNum : false,
        isUnble: false,
        orderStatus:'Processing',
        totalPages: 0 ,
        hasMore : false ,
      }
    },
    created() {
      monitoring.openCashbackOrder();//todo Facebook Pixel & Google Analytic Code    openCashbackOrder
      this.$nextTick(() => {
        let num =this.$route.query.orderType
        if(num){
          this.change(num-1)
        }else{
          this._MyOrder()
        }
      })
    },
    methods:{
      change: function(x){ //tab切换
        for(var i=0;i<this.active.length;i++){
          this.active[i]=false
          this.active[x]=true
        }
        if(x === 2){
          this.isUnble = true
          this.isShowNum = false
        }else{
          this.isUnble = false
        }
        this.$set(this.active, 5, 0)
        this.orderStatus = OrderAllStatus[x]
        this.PageNumber =1
        this.noData = false
        this.Loading = false
        this.orderList = []
        this._MyOrderType()

      },
      _MyOrder() {
        this.noData = false
        this.PageNumber = 1
        this.Loading =true
        MyOrder(this.orderStatus,this.PageNumber).then((res) => {
          this.totalPages = res.totalPages
          this.Loading =false
          this.orderList = res.data
          this._checkMore(res.data);
        })
        MyOrderUnable().then((res) => {
          if(res && res.length>0){
            this.isShowNum = true
            this.unAbleNum = res.length
          } else{
            this.isShowNum = false
          }
        })
      },
      _MyOrderType(){
        this.noData = false
        this.Loading =true
        MyOrder(this.orderStatus, this.PageNumber).then((res) => {
          this.totalPages = res.totalPages
          this.Loading =false
          this.orderList = res.data
          if(this.PageNumber<2){ //第二页起不再较验
            this._checkMore(res.data)
          }

        })
      },
      changePages(num) {
        if(num > this.totalPages){
          return
        }
        this.orderList = []
        this.PageNumber = num ;
        this._MyOrderType()
      },
      _checkMore(data) {
        if (data.length === 10){
          this.hasMore = true
        }else{
          this.hasMore = false
        }
        if(data.length=== 0){
          this.noData = true
        }
      }
    },
    components: {
      OrderList,
      pageination
    },
    watch: {
      '$route'(to, from) {
        if (to.path === '/my-order') {
          this.active = [true, false, false, false, false]
          this.orderStatus = 'Processing'
          this._MyOrder()
        }
      }
    }
  }

</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  .cashback
    width:100%
    .order-type
      width:100%;
      position:relative
      border-bottom 1px solid #ececec
      &:last-child
        margin-right:0px
      .type-li
        padding:0 10px
        color:#98999a
        display:inline-block
        float:left
        margin-right:20px
        height:50px
        line-height:50px
        cursor:pointer
        font-size: 20px;
        &:hover
          color:#333
      .active
        border-bottom:3px solid #18823a
        color: #333333
      .unble_confirm_num
        display:inline-block
        border-radius:50%
        width:14px
        height:14px
        line-height:14px
        text-align: center
        background:#fa4c4d
        color:#fff
        position: absolute
        left: 349px;
        top: 11px;
        font-size:12px
    .order-list
      margin-top:30px;
  .common-page
    margin-top 68px
    margin-bottom 76px
</style>
